<template>
    <div class="wy-main business-car-manage">
     <a-row class="wy-main-title">
       <a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >线路审核</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
	 </a-row>
     <div class="my-main-cont">
         <!-- <a-input placeholder="请输入车牌号" style="width: 200px"/> -->
         <!-- <a-input v-model="fromCity" placeholder="请输入出发地" class="wy-w-200" /> -->
         <a-form layout="inline">
           <a-row style="margin-bottom:20px;">
               <a-form-item label="运输方式" style="z-index:1">
            <a-select showSearch v-model="lineType"  style="min-width:174px" placeholder="全部">
              <a-select-option value="">全部</a-select-option>
              <a-select-option key="2" value="1">公路运输</a-select-option>
              <a-select-option key="3" value="2" >铁路运输</a-select-option>
              <a-select-option key="4" value="3" >航空运输</a-select-option>
              <a-select-option key="5" value="4" >海运运输</a-select-option>
              <a-select-option key="6" value="5" >水运运输</a-select-option>
            </a-select>
          </a-form-item>
              <a-form-item label="是否热门线路" style="z-index:1">
            <a-select showSearch v-model="hotLine"  style="min-width:174px" placeholder="全部">
              <a-select-option value="">全部</a-select-option>
              <a-select-option key="1" value="0">否</a-select-option>
              <a-select-option key="2" value="1" >是</a-select-option>
            </a-select>
          </a-form-item>
              <a-form-item label="审核状态" style="z-index:1">
            <a-select showSearch v-model="approvalStatus"  style="min-width:174px" placeholder="全部">
              <a-select-option value="">全部</a-select-option>
              <a-select-option key="2" value="106">待审核</a-select-option>
              <a-select-option key="3" value="107" >审核成功</a-select-option>
              <a-select-option key="4" value="108" >审核失败</a-select-option>
            </a-select>
          </a-form-item>
           </a-row>
                   <a-form-item  label="出发地" style="z-index:1">
          <a-input v-model="beginPlace"  placeholder='请输入出发地' @click="departureShowMap"  ><a-icon type="environment" slot="suffix" style="color: #15837A;" /></a-input>
        </a-form-item>
                <a-form-item  label="到达地" style="z-index:1">
          <a-input v-model="endPlace"  placeholder='请输入到达地'  @click="destinationShowMap" ><a-icon type="environment" slot="suffix" style="color: #15837A;" /></a-input>
        </a-form-item>
<!--          <a-input class="wy-w-200"  @click="departureShowMap" v-model="beginPlace" placeholder="请输入出发地" ref="userNameInput"><a-icon type="environment" slot="suffix" style="color: #15837A;" />
      </a-input>
         <a-input class="wy-w-200"  @click="destinationShowMap" v-model="endPlace" placeholder="请输入到达地" ref="userNameInput"><a-icon type="environment" slot="suffix" style="color: #15837A;" />
      </a-input> -->
			   <!-- <a-input v-model="toCity" placeholder="请输入到达地" class="wy-w-200 wy-m-l-10" /> -->
         <a-button type="primary" style="margin-left: 10px;" @click="getLine">查询</a-button>
			   <a-button style="margin-left: 10px;" @click="react">重置</a-button>
         <a-button class="title-button" type="primary" style="float: right" @click="seeAllInfo()">批量审核</a-button>
         <a-button class="title-button" type="primary" style="float: right;margin-right:15px;" @click="markList()">标记热门</a-button>
        </a-form>
         <a-table :columns="columns" :rowKey="record => record.lineId" :dataSource="data" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange" :pagination="pagination" :loading="loading" style="margin-top: 20px" >
					 <span slot="fromCity" slot-scope="text, record">
						 <img v-if="record.hotLine==1" style="margin-top: -5px;margin-right: 10px;" :src="hotImg" alt="">{{record.beginPlace+'-'+record.endPlace}}
					 </span>
					 <span slot="createTime" slot-scope="text, record">
              {{record.createTime&&record.createTime.split(' ')[0]}}
					 </span>
				   <span slot="lineType" slot-scope="text, record">
				      <span v-if="record.lineType==1">公路运输</span>
				      <span v-if="record.lineType==2">铁路运输 </span>
				      <span v-if="record.lineType==3">航空运输</span>
				      <span v-if="record.lineType==4">海运运输</span>
              <span v-if="record.lineType==4">水运运输</span>
			    </span>
           <span slot="validDayed" slot-scope="text, record">
              <span v-if="record.longValid==1">长期有效</span>
              <span v-if="record.longValid==0">{{record.validDay}}</span>
          </span>
			     <span slot="status" slot-scope="text, record">
                <a v-if="record.approvalStatus==106" class="wei_warning" href="javascript:;" @click="editLine(record)">待审核</a>
                <a v-if="record.approvalStatus==107" class="wei_primary" href="javascript:;" @click="editLine(record)">审核成功</a>
                <a v-if="record.approvalStatus==108" class="wei_danger" href="javascript:;" @click="editLine(record)">审核失败</a>
                <a v-if="record.hotLine == 0"  class="wei_primary" href="javascript:;" @click="markSingle(record,1)">标记热门</a>
                <a v-if="record.hotLine == 1" class="wei_danger" href="javascript:;" @click="markSingle(record,0)">取消热门</a>
		     </span>
					<!-- <span slot="rztype" slot-scope="text, record" style="color: red;">
					{{text}}
			  </span>	 -->
         </a-table>
<!-- 				  <div style="margin-top: -50px">
						<a-button @click="delAll">删除所选</a-button>
          </div> -->
     </div>
         <map-svg ref="mapSvgDialog" @change="mapSvgCall"></map-svg>
		 	<a-modal :title="type=='edit'?'线路审核':'线路审核'"  :visible="visible" @cancel="handleCancel" width="900px" :footer="null" class='send-new-model'>
		    <div class="business-circuit">
		      	<PublishForm v-if="visible" :lineType="lineType" :type="type" :detail="detail"  @handleCancel="editHandleCancel"></PublishForm>
		    </div>
	    </a-modal>
	    <a-modal title="线路审核" :visible="visibleAll"  @cancel="handleCancel"  width="900px" :maskClosable='false' :footer="null" >
           <line-add-all v-if="visibleAll" @cancel="handleCancel" :datailAll='datailAll'></line-add-all>
        </a-modal>
    </div>

</template>
<script>
import MapSvg from '@/components/dialog/MapSvg'
import hotImg from '../../../../../static/img/others/hot.png'
 import PublishForm from './PublishForm'
 import LineAddAll from './lineAddAll'
	const columns = [{
			title: '运输方式',
			dataIndex: 'lineType',
			scopedSlots: {
				customRender: 'lineType'
			},
		},
		{
			title: '出发地-到达地',
			dataIndex: 'fromCity',
			scopedSlots: {
				customRender: 'fromCity'
			},
		},
		{
			title: '有效期',
			dataIndex: 'validDay',
            scopedSlots: {
        customRender: 'validDayed'
      },
      
		},
		{
			title: '发布日期',
			dataIndex: 'createTime',
			scopedSlots: {
				customRender: 'createTime'
			},
		},
		// {
		// 	title: '浏览量',
		// 	dataIndex: 'looksNum',
		// },
		{
		title: '操作',
		dataIndex: 'status',
		key: 'status',
		scopedSlots: {
			customRender: 'status'
		}
	}
	];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  }
  
};
export default {
    
    data() {
        return {
          hotImg:hotImg,
          lineType:'',
          hotLine:'',
          approvalStatus:'',
				 visible: false,
				 visibleAll:false,
				 type: '',
				 loading:false,
         beginPlace: '',
         endPlace: '',
				 data: [],
         columns,
				 rowSelection,
        pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          total:10,
          showSizeChanger: true,
          showTotal: (total, range) => `共 ${total} 条记录`
        },
				selectedRowKeys: []
        }
		}, 
		components: {
			PublishForm,
			LineAddAll,
      MapSvg
		},
    created() {
      this.getLine()
		},
    methods: {

	     mapSvgCall(d) {
        console.log(d)
        if(d.name === 'departure') {

            this.beginPlace = d.provCityArea
          this.departureData = Object.assign({}, d);
        }

        if(d.name === 'destination'){
          this.endPlace = d.provCityArea
          this.departureData = Object.assign({}, d);
        }

      },
      //选择出发地
      departureShowMap() {
        this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
      },
          // 选择到达地
      destinationShowMap() {
        this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
      },
			//关闭弹窗
			handleCancel () {
				this.visible = false;
				 this.visibleAll = false
        this.getLine()
        this.selectedRowKeys=[];
			},
			//保存后返回回调
			editHandleCancel () {
				this.getLine();
				this.handleCancel();
			},
					// 审核线路信息弹框
			editLine(data){
		        this.type = 'edit';
		        this.lineType = data.lineType;
		        this.detail = data;
		        this.visible = true;
			},

       // 标记单条热门信息
      markSingle(data,type){
        var content,title,message;

        if(type==1){
          title = '确定标记所选中的记录?'
          content = '当您点击确定按钮后，这条线路将会被标注为热门线路'
          message = '标记热门线路成功'
        }else{
          title = '确定取消所选中的记录?'
          content = '当您点击确定按钮后，这条热门线路将会被取消'
          message = '取消热门线路成功'
        }
        let that = this

        this.$confirm({
          title: title,
          content: content,
          centered: true,
          onOk () {
            let params={
              lineId:data.lineId,
              lineType:data.lineType,
              hotLine:type
            }
            
            that.$put('/info/line',params,true).then((r) => {
  
              if(r.status == 200){
                that.$notification.success({
                  message: message,
                });

              that.selectedRowKeys = []
              that.getLine()

              }
              that.loading = false;
            }).catch((e) => {
              console.log(e)
              that.loading = false;
            })
          },
          onCancel () {
            that.selectedRowKeys = []
          }
        })
      },

        markList(){
          var params=[];

        if(this.selectedRowKeys.length){
          if(this.selectedRowKeys.length>10){
                  this.$confirm({
                    title: '确定标记所选中的记录?',
                    content: '热门线路不能超过10条！',
                    centered: true
                  })
                 return;
          }
            let logIds = [];
           for(var i=0;i<this.selectedRowKeys.length;i++){
            logIds.push(this.selectedRowKeys[i])
           }

           for(var i=0;i<this.data.length;i++){
            for(var j=0;j<logIds.length;j++){
              if(this.data[i].lineId ==logIds[j]){
                params.push({
                    lineId:this.data[i].lineId,
                    lineType:this.data[i].lineType,
                    hotLine:1//标记为热门,0取消热门
                })
              }
            }
           }
        if(params.length>1){
            for(var i=0;i<params.length-1;i++){
              if(params[i].lineType!=params[i+1].lineType){
                  this.$confirm({
                    title: '确定标记所选中的记录?',
                    content: '请先选择同一运输方式，才可做批量热门线路标记!',
                    centered: true
                  })
                 return;
              }
            }
        }


              let that = this
              this.$confirm({
                title: '确定标记所选中的记录?',
                content: '您本次操作将覆盖之前所选的热门线路数据，您确定将本次所选线路全部标记为热门线路吗？',
                centered: true,
                onOk () {
              that.$put('info/line/updateLineBatchById',params,true).then((r) => {
  
              if(r.status == 200){
                that.$notification.success({
                  message: r.data.message,
                });

              that.selectedRowKeys = []
               that.getLine()

              }
              that.loading = false;
            }).catch((e) => {
              console.log(e)
              that.loading = false;
            })
                },
                onCancel () {
                  that.selectedRowKeys = []
                }
              })
          }else{
            this.$message.error('请选择需要标记的热门城市线路!')
          }
      
      },

			//删除
			delAll() {
				this.$confirm({
					title: '确定删除所选中的记录？',
					content: '当您点击确定按钮后，这些记录将会被彻底删除',
					centered: true
				})

			},
			//重置
			 react() {
				this.pagination.defaultCurrent = 1;
				this.beginPlace = '';
				this.endPlace = '';
        this.hotLine = '';
        this.approvalStatus = '';
        this.selectedRowKeys = [];
        this.lineType = '';

				this.getLine();
			 },
			 seeAllInfo(){
        if(this.selectedRowKeys.length){
            this.visibleAll = true;
            let logIds = [];
           for(var i=0;i<this.selectedRowKeys.length;i++){
            logIds.push({"lineId":this.selectedRowKeys[i]})
           }
            this.datailAll = logIds;
          }else{
            this.$message.error('请选择需要审核的线路!')
          }
      
      },
       onSelectChange (selectedRowKeys) {
          console.log('selectedRowKeys changed: ', selectedRowKeys);
          this.selectedRowKeys = selectedRowKeys
        },
      //获取线路信息
      	getLine(params = {}) {
				this.loading = true
				params.pageSize = this.pagination.defaultPageSize
				params.pageNum = this.pagination.defaultCurrent
        params.beginPlace = this.beginPlace
        params.endPlace = this.endPlace
        if(this.hotLine!=''){
          params.hotLine = this.hotLine
        }

        if(this.approvalStatus!=''){
          params.approvalStatus = this.approvalStatus
        }

         if(this.lineType!=''){
          params.lineType = this.lineType
        }

				// params.mode = '1'
				this.$get('/info/line', params).then((r) => {
						console.log(r)
						this.loading = false
						this.data = r.data.data.rows
            this.pagination.total = r.data.data.total
					})
					.catch((e) => {
						console.log(e)
						this.loading = false;
					})
			},
            // 表格排序 分页 筛选事件
      handleTableChange(pagination, filters, sorter) {
         this.pagination.defaultPageSize = pagination.pageSize
         this.pagination.defaultCurrent  = pagination.current
         this.getLine();
        // this.getcarSource({
        //   ...this.queryParams
        // })
      },

    }
}
</script>
<style lang="less">

</style>
